<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="../cssClass/titleBarCss.css">
	<script src="js/index.js"></script>
	<title>首页</title>
</head>

<body>
	<div style="width: 80%;margin: auto;">
		<!-- 头部背景+头像+登录+注册 -->
		<div class="main_div">
			<div class="main_title">
				<span class="main_title_span">王大头</span>
			</div>

		</div>
	</div>

	<!-- 头部table -->
	<div class="title-bar">
		<div class="title-bar-container">
			<h1 class="title-bar-title">My Website</h1>
			<nav class="title-bar-nav">
				<ul class="titlebar">
					<li><a href="../page/index.html#content11" class="nav-link">Home</a></li>
					<li><a href="../page/index.html#content22" class="nav-link">article</a></li>
					<li onclick="jumpToFn('about')">关于我们</li>
					<li class="active" onclick="jumpToFn('novel')">最新文章</li>
					<li onclick="jumpToFn('message')">给我留言</li>
				</ul>
			</nav>
		</div>
	</div>

	<div id="main">
		<div style="width: 100%;height: 30px;font-size: 20px;text-align: center;">
			目前只能阅读四大名著，其他小说还只是图片。
		</div>
		<div class="mainbox">

			<ul class="littlebox" style="margin-left: 0px;">
				<li>古典小说</li>
				<div class="book_list">
					<div id="zuo"></div>
					<div id="you"></div>
					<div class="contant1" id="first" style="display: block;">
						<div style="display: block;"><img src="img/DRC.jpg">
							红楼梦
						</div>
						<div style="display: none;"><img src="img/J2W.jpg">
							<p>西游记</p>
						</div>
						<div style="display: none;"><img src="img/WM.jpg">
							<p>水浒传</p>
						</div>
						<div style="display: none;"><img src="img/RTK.jpg">
							<p>三国演义</p>
						</div>
					</div>
					<div class="contant1" id="firth" style="display: none;">
						<div style="display:block;"><img src="img/架空历史.jpg">
							暂未上线，敬请期待
						</div>
					</div>
				</div>
				<li>架空历史</li>
			</ul>
			<ul class="littlebox">
				<li>武侠小说</li>
				<div class="book_list">
					<div class="contant1" id="sencond" style="display: block;">
						<div style="display:block;"><img src="img/武侠小说.jpg">
							暂未上线，敬请期待
						</div>
					</div>
					<div class="contant1" id="sixth" style="display: none;">
						<div style="display:block;"><img src="img/修真玄幻.jpg">
							暂未上线，敬请期待
						</div>
					</div>
				</div>
				<li>修真玄幻</li>
			</ul>
			<ul class="littlebox">
				<li>言情小说</li>
				<div class="book_list">
					<div class="contant1" id="thirty" style="display: block;">
						<div style="display:block;"><img src="img/言情小说.jpg">
							暂未上线，敬请期待
						</div>
					</div>
					<div class="contant1" id="seventh" style="display: none;">
						<div style="display:block;"><img src="img/悬疑推理.jpg">
							暂未上线，敬请期待
						</div>
					</div>
				</div>
				<li>悬疑推理</li>
			</ul>
			<ul class="littlebox">
				<li>科幻小说</li>
				<div class="book_list">
					<div class="contant1" id="thirty" style="display: block;">
						<div style="display:block;"><img src="img/科幻小说.jpg">
							暂未上线，敬请期待
						</div>
					</div>
					<div class="contant1" id="seventh" style="display: none;">
						<div style="display:block;"><img src="img/校园都市.jpg">
							暂未上线，敬请期待
						</div>
					</div>
				</div>
				<li>校园都市</li>
			</ul>
		</div>
	</div>
	<!-- <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> -->
</body>

</html>
<script src="../jsStyle/me.js"></script>